<template>
    <div class="singer">
        <div class="warp">
            <ComNav title="我的歌手" moreLink="/discover/playlist/" moreText="" :showIcon="false" :hideBackground="true" />
            <div class="n-singer">
                <div class="itm">
                    <div class="cvr">
                        <a href="/artist?id=3684" class="f-ib f-tdn">
                            <img
                                src="http://p1.music.126.net/r6W-zCnV-aduVn_PLZYuYg==/109951168529049969.jpg?param=80y80">
                        </a>
                    </div>
                    <div class="cnt">
                        <h4 class="tit f-fs2">
                            <a href="/artist?id=3684">林俊杰</a>
                        </h4>
                        <p class="s-fc3">80个专辑&nbsp;&nbsp;&nbsp;&nbsp;199个MV</p>
                    </div>
                </div>
                <div class="itm">
                    <div class="cvr">
                        <a href="/artist?id=29051613" class="f-ib f-tdn">
                            <img
                                src="http://p1.music.126.net/sZ-KVmxSvFiygWyCzxnV8w==/109951169694705559.jpg?param=80y80">
                        </a>
                    </div>
                    <div class="cnt">
                        <h4 class="tit f-fs2">
                            <a href="/artist?id=29051613">郑润泽</a>
                        </h4>
                        <p class="s-fc3">58个专辑&nbsp;&nbsp;&nbsp;&nbsp;13个MV</p>
                    </div>
                </div>
            </div>
            <div class="pagination">
                <el-pagination background layout="prev, pager, next" prev-text="上一页" next-text="下一页" :total="1000" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import ComNav from '../components/ComNav.vue'
</script>

<style lang="scss" scoped>
.singer {
    height: 100%;
    position: relative;
    zoom: 1;
    width: 740px;
    padding-bottom: 50px;

    .warp {
        padding: 40px;

        .n-singer {
            margin-bottom: 50px;

            .itm {
                padding: 10px 0;
                border-bottom: 1px solid #ddd;
                display: flex;

                h4 {
                    height: 21px;
                    margin: 10px 0;
                    line-height: 21px;
                }

                .cvr {
                    width: 80px;
                    height: 80px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .cnt {
                    margin-left: 25px;
                }
            }
        }

        .pagination {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 20px 0;
            text-align: center;
        }
    }
}
</style>